<!doctype html><html lang="en"><head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <!-- Bootstrap CSS -->    <!-- <link rel="stylesheet" href="bootstrap4/dist/css/bootstrap.css">    <link rel="stylesheet" href="ycss/nav.css"> -->    <!-- <link rel="stylesheet" href="css/banner.css">    <link rel="stylesheet" href="css/center.css">    <link rel="stylesheet" href="css/bottom.css"> -->    <!-- <script src="jq/jquery.min.js"></script> -->    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>    <title>bootstrap 4</title>    <style>        body{            min-width: 580px;            min-height: 100%;            background-color: #F8F9FA;         }    </style><script defer src="js/index.js"></script><link href="css/index.css" rel="stylesheet"></head><body><!--导航条--><div class="head" style="display: flex"><nav class=" navbar navbar-expand-lg navbar-light container" style="padding: 0 15px">    <a class="navbar-brand" href="#">        <img src="" width="100px"/>    </a>    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">        <span class="navbar-toggler-icon" ></span>    </button>    <div class="collapse navbar-collapse" id="navbarNavDropdown">        <ul class="hd navbar-nav col-lg-9" id="hd">            <li class="nav-item ">                <a class="nav-link" href="index.html" >首页</a>            </li>            <li class=" nav-item">                <a class="nav-link" href="#">关于我们</a>            </li>            <li class=" nav-item">                <a class="nav-link" href="#" >畅销榜单</a>            </li>            <li class=" nav-item dropdown">                <a class="nav-link" href="#">全部商品</a>            </li>            <li class=" nav-item">                <a class="nav-link" href="#">新闻资讯</a>            </li>        </ul>        <ul  class="d-flex flex-row form-inline my-3 my-lg-0 navbar-nav" id="nav-right">            <li class=" nav-item">            <a href="login.html" style="text-decoration: none;color: black"><img  src="" alt="" width="25px">                <span id="dr" class="dr">登录</span><span id="cle" style=" vertical-align: middle;"></span></a>            </li>            <li class=" nav-item">            <a href=""><img src="" alt="" width="22px"></a>            </li>            <li class=" nav-item">            <a id="gwc" href=""><img src="" alt="" width="22px"></a>            </li>        </ul>    </div></nav></div><!--banner图--><div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel"><!--    三个方块-->    <ol class="carousel-indicators">        <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>        <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>        <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>    </ol>    <div class="carousel-inner">        <div class="carousel-item active">            <img src="" class="d-block w-100" alt="...">            <div class="carousel-caption d-none d-md-block">            </div>        </div>        <div class="carousel-item">            <img src="" class="d-block w-100" alt="...">            <div class="carousel-caption d-none d-md-block">            </div>        </div>        <div class="carousel-item">            <img src="" class="d-block w-100" alt="...">            <div class="carousel-caption d-none d-md-block">            </div>        </div>    </div><!--    左右两键-->    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">        <span  aria-hidden="true" class="d-none d-lg-block">        <img src="" alt="" width="70px">        </span>    </a>    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">        <span aria-hidden="true" class="d-none d-lg-block">         <img src="" alt="" width="70px">        </span>    </a></div><!--主体--><div id="center" class="container"><!--    新品上市—限时优惠-->    <div>   <div class="row col-xs-12 col-lg-12 justify-content-center" id="row">       <a class="ttl" href=""> --新品上市—限时优惠--</a>   </div>    <div class="row row-cols-1 row-cols-md-4" id="box">        <!--第一张图片--><!--        <div class=" col-6 mb-4">--><!--            <div class="card h-100">--><!--                <img src="" class="card-img-top" alt="..." style="cursor: pointer">--><!--                <div class="card-body">--><!--                    <h5 class="cad  card-text">保湿精华小棕瓶</h5>--><!--                    <p>每日必备护肤神器</p>--><!--                    <p style="color: red">疯抢价：￥399.00元</p>--><!--                </div>--><!--            </div>--><!--        </div>--><!--        &lt;!&ndash;第二张图片&ndash;&gt;--><!--        <div class=" col-6 mb-4" >--><!--            <div class="card h-100">--><!--                <a href="details2.html"> <img src="" class="card-img-top" alt="..." style="cursor: pointer"></a>--><!--                <div class="card-body">--><!--                    <a style="text-decoration: none;color: black" href="details2.html"> <h5 class="cad card-text">蜂蜜面膜</h5></a>--><!--                    <p>蜂蜜面膜 10 片</p>--><!--                    <p style="color: red">疯抢价：￥299.00元</p>--><!--                </div>--><!--            </div>--><!--        </div>--><!--        &lt;!&ndash;第三张图片&ndash;&gt;--><!--        <div class="col-6 mb-4">--><!--            <div class="card h-100">--><!--                <a href="details.html"><img src="" class="card-img-top" alt="..." style="cursor: pointer"></a>--><!--                <div class="card-body">--><!--                    <a style="text-decoration: none;color: black" href="details.html"><h5 class="cad card-text">花漾保湿粉水</h5></a>--><!--                    <p>花漾粉水 滋养肌肤</p>--><!--                    <p style="color: red">疯抢价：￥599.00元</p>--><!--                </div>--><!--            </div>--><!--        </div>--><!--        &lt;!&ndash;第四张图片&ndash;&gt;--><!--        <div class="col-6 mb-4">--><!--            <div class="card h-100">--><!--                <img src="" class="card-img-top" alt="..." style="cursor: pointer">--><!--                <div class="card-body">--><!--                    <h5 class="cad card-text">蜂蜜面膜</h5>--><!--                    <p>蜂蜜面膜 10 片</p>--><!--                    <p style="color: red">疯抢价：￥99.00元</p>--><!--                </div>--><!--            </div>--><!--        </div>-->    </div>    </div><!--    热销产品 /PRODUCTS-->    <div>        <div class="row col-xs-12 col-lg-12 justify-content-center" id="pro">            <a class="ttl" href=""> --热销产品 /PRODUCTS--</a>        </div>        <div class="row row-cols-1 row-cols-md-4">            <!--第一张图片-->            <div class="col-6 mb-4">                <div class="card h-100">                    <img src="" class="card-img-top" alt="..." style="cursor: pointer">                    <div class="card-body">                        <h5 class="cad card-text">九色眼影盘</h5>                        <p>眼影盘</p>                        <p style="color: red">疯抢价：￥89.00元</p>                    </div>                </div>            </div>            <!--第二张图片-->            <div class="col-6 mb-4" >                <div class="card h-100">                    <img src="" class="card-img-top" alt="..." style="cursor: pointer">                    <div class="card-body">                        <h5 class="cad card-text">璀璨香水</h5>                        <p>璀璨花香(50毫升)</p>                        <p style="color: red">疯抢价：￥269.00元</p>                    </div>                </div>            </div>            <!--第三张图片-->            <div class="col-6 mb-4">                <div class="card h-100">                    <img src="" class="card-img-top" alt="..." style="cursor: pointer">                    <div class="card-body">                        <h5 class="cad card-text">露可四色口红</h5>                        <p>露可保湿四色口红</p>                        <p style="color: red">疯抢价：￥179.00元</p>                    </div>                </div>            </div>            <!--第四张图片-->            <div class="col-6 mb-4">                <div class="card h-100">                    <img src="" class="card-img-top" alt="..." style="cursor: pointer">                    <div class="card-body">                        <h5 class="cad card-text">眼线笔</h5>                        <p>极细眼线笔</p>                        <p style="color: red">疯抢价：￥79.00元</p>                    </div>                </div>            </div>        </div>    </div></div><!--    用心服务--><div style="background-color: #FFFFFF;padding: 20px 0" >    <div class="container " style="text-align: center">        <div class="col-12" style="margin-bottom:20px ">        <button type="button" class="btn btn-outline-dark ">用心服务/service</button>        </div>    <div style="display: flex">        <div class="col-4">            <h5>7天无理由退货</h5>            <p>所有商品，7天内无拆封条件下无理由退换货</p>        </div>        <div class="col-4">            <h5>24小时闪电发货</h5>            <p>所有商品在您下单24小时内，承诺发货</p>        </div>        <div class="col-4">            <h5>全场顺丰包邮</h5>            <p>所有商品，全国大部分地区顺丰包邮，偏远地区除外</p>        </div>    </div>    </div></div><!--尾部--><div id="bottom" > <div class="container">     <!--     上层盒子-->     <div class="bottom-top"><!--         左边-->         <div class="row col-12">         <div class="bottom-top-left col-sm-12 col-lg-5 ">             <div class="col-sm-8">             <button  type="button" class="btn btn-outline-light">在线商城 &nbsp;&nbsp;></button>             <p>联系方式</p>             <p>159-5686-8888</p>             </div>             <div >             <img class="col-4" src="" alt="" width="70%" style="max-width: 150px">             </div>         </div><!--         右边-->         <div class="bottom-top-right col-sm-12   col-lg-7 ">             <ul >                 <h5><a href="">个人护理</a></h5>                 <li><a href="">脸部护理</a></li>                 <li><a href="">头发护理</a></li>                 <li><a href="">全身护理</a></li>                 <li><a href="">滋养美白</a></li>             </ul>             <ul >                 <h5><a href="">健康美肌</a></h5>                 <li><a href="">营养品</a></li>                 <li><a href="">保健品</a></li>                 <li><a href="">美容仪</a></li>                 <li><a href="">胶原蛋白</a></li>             </ul>             <ul >                 <h5><a href="">化妆工具</a></h5>                 <li><a href="">化妆海绵</a></li>                 <li><a href="">彩妆套刷</a></li>                 <li><a href="">睫毛夹</a></li>                 <li><a href="">其他工具</a></li>             </ul>             <ul >                 <h5><a href="">香水</a></h5>                 <li><a href="">男士香水</a></li>                 <li><a href="">女士香水</a></li>                 <li><a href="">惠选套装</a></li>             </ul>         </div>         </div>     </div>     <!--     下层盒子-->     <div style="text-align: center ;margin: 20px 0">         <div style="color: #adadad;">我的网站 版权所有 2008-2014 湘ICP备8888888</div>         <div style="color: #adadad;">爱米有限公司             地址：南昌市上海路555号 电话：021-23888666</div>         <div style="color: #adadad;">联系我们 : 400-820-5118, 800-820-5118  联系时间 : 周一至周日 09:00-21:00 (节假日休息)</div>         <div style="color: #adadad;">国家药监局提示您：请正确认识化妆品功效， 化妆品不能替代药品，不能治疗皮肤病等疾病。</div>     </div> </div></div><!--返回顶部--><a class="wj" href="" id="wj"></a><!-- <script src="js/nav.js"></script><script src="bootstrap4/dist/js/jquery.slim.min.js"></script><script src="bootstrap4/dist/js/bootstrap.bundle.min.js"></script> --><script src="js/template-web.js"></script><script type="text/html" id="tem1">    {{each  list}}    <div class=" col-6 mb-4">        <div class="card h-100">                <img title={{$value.title}} src={{$value.src}} class="card-img-top" alt="..." style="cursor: pointer">            <div class="card-body">                <h5 class="cad  card-text">{{$value.name}}</h5>                <p>每日必备护肤神器</p>                <p style="color: red">疯抢价：{{$value.pic}}</p>            </div>        </div>    </div>    {{/each}}</script><!-- <script src="js/public.js"></script> --><script>    // window.onload=function () {    //     window.onscroll=function () {    //         var top = document.documentElement.scrollTop || document.body.scrollTop;    //         console.log(top);    //         top>10?wj.style.display="block":wj.style.display="none";    //         wj.onclick=function (e) {    //             e.preventDefault();    //             var timer=setInterval(function () {    //                 top-=10;    //                 document.documentElement.scrollTop=top;    //                 if(top<=0){    //                     clearInterval(timer);    //                 }    //             })    //         }    //     }    // }    // //判断购物车的点击效果    // window.onload=function () {    //     var dr=document.getElementById("dr");    //     var cle=document.getElementById("cle");    //     if (localStorage['tet']!=null){    //         dr.innerHTML=localStorage['tet']    //         cle.innerHTML="退出"    //     }    //     //退出登入    //     cle.onclick=function () {    //         localStorage.removeItem('tet')    //         dr.innerHTML="登录";    //         cle.innerHTML="";    //         // console.log( cle.innerHTML);    //         // console.log(sessionStorage['tet']);    //     }    // }    var ob=[            {src:"img/11.jpg", name:'保湿精华小棕瓶', pic:"￥559.00",title:"1"},            {src:"img/12.jpg", name:'蜂蜜面膜', pic:"￥159.00", title:"2"},            {src:"img/13.jpg", name:'花漾补水', pic:"￥259.00", title:"3"},            {src:"img/14.jpg", name:'洗面奶', pic:"￥79.00", title:"4"},        ]    var obj={        list:ob,    }    var html=template("tem1",obj);    $("#box").html(html);    // 转为字符串存储数据    str=JSON.stringify(obj);    localStorage.setItem("data",str);    var imgs=[];    imgs=document.getElementsByTagName("img")    console.log(imgs);    for (i=0;i<imgs.length;i++){        imgs[i].onclick=function () {            localStorage['details']=this.getAttribute('title');            window.location.assign('details.html')        }    }</script></body></html>